// 新建报表
import React, { useState } from 'react';
// import { Row, Col, Button, Modal, Select, Form, Drawer, Table, Input, Radio, List } from 'antd';

// import styles from './index.module.scss';
import { Form, Input, Modal } from 'antd';
import FormItem from 'antd/lib/form/FormItem';
import { createAnalysePage } from 'src/services/AnalyseManage';
// import AnalyseCategorySelect from 'src/pages/AnalyseManage/Components/AnalyseCategorySelect';
import { NewReportProp } from 'src/services/AnalyseManage/type';
import { RouteComponentProps, withRouter } from 'react-router';

const NewReportModal = ( props: NewReportProp & RouteComponentProps ) => {
	const [ form ] = Form.useForm();
	const { modalVisible, onSuccess, onCancel, parentTreeId, deloitteFlag } = props;
	const [ currentData, setCurrentData ] = useState( { id: null, parentId: null } );

	const okHandle = async () => {
		form.validateFields()
			.then( async ( values: any ) => {

				let response;

				let data = { ...values, type: props.pageType, deloitteFlag: deloitteFlag || '0', };
				if ( parentTreeId ) {
					data.parentId = parentTreeId;
				}
				response = await createAnalysePage( data );

				if ( response.data && response.data.success ) {
					// setState( { modalVisible: false,currentData: response.data.data } );
					setCurrentData( response.data.data );
					onSuccess( response.data.data.id, response.data.data );
				}
			} )
			.catch( errorInfo => { // error
				// console.log( errorInfo );
				// form.resetFields();
			} );

	};
	const handelCancel = () => {
		onCancel();
	};

	/* const selectFolder = ( node: any ) => {
		form.setFieldsValue( { parentId: node.id } );
		setCurrentData( { ...currentData, parentId: node.id } );
	}; */

	return (
		<Modal
			destroyOnClose
			title={props.name || '新建报表'}
			visible={ modalVisible }
			onCancel={ handelCancel }
			onOk={ okHandle }
			width={ '60%' }
			okText='确定'
			cancelText='取消'
		>
			<Form
				preserve={false}
				layout="horizontal" form={ form }
				initialValues={ currentData }>
				{/* <FormItem
					labelCol={ { span: 5 } } wrapperCol={ { span: 15 } } label={`${props.name}编码`} name="code"
					rules={ [ { required: true, message: '不能为空！' } ] }>
					<Input placeholder="编码不能为空，且不可重复"/>
				</FormItem> */}
				<FormItem
					labelCol={ { span: 5 } } wrapperCol={ { span: 15 } } label={`${props.name}名称`} name="name"
					rules={ [ { required: true, message: '不能为空！' } ] }>
					<Input placeholder="名称不能为空"/>
				</FormItem>
				{/* 修改为发布时选文件夹 */}
				{/* { !parentTreeId && ( <FormItem
					labelCol={ { span: 5 } } wrapperCol={ { span: 15 } } label="请选择文件夹" name="parentId"
					rules={ [ { required: true, message: '不能为空！' } ] }>
					<AnalyseCategorySelect 
						deloitteFlag={deloitteFlag}
						onSelect={ ( node ) => { selectFolder( node ); } } 
						defaultSelectedKeys={ [] }
					></AnalyseCategorySelect>
				</FormItem> )
				} */}
				<FormItem
					labelCol={ { span: 5 } } wrapperCol={ { span: 15 } } label="描述" name="des"
					rules={ [ { message: '不能为空！' } ] }>
					<Input/>
				</FormItem>
			</Form>
		</Modal>
	);

};

export default withRouter( React.memo( NewReportModal ) );
